import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { BookOutlined, TeamOutlined, FolderOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { getBooks } from '@/services/bookAPi';
import { getCategories } from '@/services/categoryApi';
import { getBorrowings } from '@/services/BorrowingAPI';

const Welcome: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [stats, setStats] = React.useState({
    totalBooks: 0,
    totalCategories: 0,
    totalBorrowings: 0,
    activeBorrowings: 0,
  });

  React.useEffect(() => {
    // 获取统计数据
    const fetchStats = async () => {
      try {
        const [booksRes, categoriesRes, borrowingsRes] = await Promise.all([
          getBooks({ limit: 1 }),
          getCategories({ limit: 1 }),
          getBorrowings({ limit: 1 }),
        ]);

        setStats({
          totalBooks: booksRes.data.count,
          totalCategories: categoriesRes.data.count,
          totalBorrowings: borrowingsRes.data.count,
          activeBorrowings: borrowingsRes.data.count, // 这里应该根据实际API调整
        });
      } catch (error) {
        console.error('获取统计数据失败:', error);
      }
    };

    fetchStats();
  }, []);

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="图书总数"
              value={stats.totalBooks}
              prefix={<BookOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="分类总数"
              value={stats.totalCategories}
              prefix={<FolderOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="借阅总数"
              value={stats.totalBorrowings}
              prefix={<TeamOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="当前借阅"
              value={stats.activeBorrowings}
              prefix={<CheckCircleOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Card 
        title="系统简介" 
        style={{ marginTop: 24 }}
      >
        <p>欢迎使用图书管理系统！</p>
        <p>本系统提供了图书管理、分类管理、借阅管理和用户管理等功能，使用Django REST Framework作为后端框架，Umi+Max作为前端框架。</p>
        <p>主要功能包括：</p>
        <ul>
          <li>图书管理：添加、编辑、删除和查询图书信息</li>
          <li>分类管理：创建图书分类，支持层级结构</li>
          <li>借阅管理：图书借阅、归还和续借功能</li>
          <li>用户管理：用户权限管理和个人信息维护</li>
        </ul>
        <p>当前登录用户：{initialState?.currentUser?.username || '未登录'}</p>
      </Card>
    </div>
  );
};

export default Welcome;